<template>
    <div class="cell" @click="goDetail">
        <div class="cell_l">
            <p class="tied_detail_h">{{item.user_name}}</p>
            <p class="tied_detail_t">{{time}}</p>
        </div>
        <p class="tied"><span>{{item.money}}</span>积分</p>
        <img class="rie" :src="this.$Public.ossImg+'arrow_right.svg'" alt="">
    </div>
</template>

<script type="text/ecmascript-6">
    import Moment from 'moment';

    export default {
        name: `order-list-cell`,
        props: {
            item: {
                type: Object
            }
        },
        data() {
            return {
                time: ''
            };
        },
        created() {
            this.time = this.dateFormat(new Date(this.item.time * 1000));
        },
        methods: {
            goDetail() {
                this.$router.push({
                    name: 'rebateOrderDetail',
                    query: {
                        getMoney: true,
                        id: this.item.order_id
                    }
                });
            },
            dateFormat(val) {
                return Moment(val).format('YYYY-MM-DD HH:mm:ss');
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl"
    .cell {
        flex-x();
        height: vw(57px);
        background: #fff;
        margin-top: vw(5px);
        align-items: center;
        padding: 0 1vw 0 3vw
    }

    .cell_l {
        flex: 1;
        flex-y();
        align-items: flex-start;
        & p {
            line-height: 1.4
        }
        & .tied_detail_h {
            word(16px, #333);
        }
        & .tied_detail_t {
            word(13px, #666);
        }
    }

    .tied {
        word(13px, #666);
        & span {
            word(16px, #000);
            padding-right: 1vw
        }
    }

    .rie {
        width: 6vw
    }
</style>
